import React, { useState } from 'react';
import { Tabs, Modal } from 'antd';
// import XbomObjectInfo from './XbomObjectInfo';
// import SettlementList from './SettlementList';
// import XConfigList from './XConfigList';
// import TechnicalNotice from './TechnicalNotice';
// import Mail from './Mail';

const { TabPane } = Tabs;

const App: React.FC = ({ visible, onCancel, value }: { visible: boolean; onCancel: () => void; value: any }) => {
  const [activeKey, setActiveKey] = useState('1');
  return (
    <Modal
      title="Xbom对象详情"
      visible={visible}
      onCancel={onCancel}
      width={'90%'}
      style={{
        height: 700,
      }}
      okButtonProps={{
        style: {
          display: 'none',
        },
      }}
    >
      <Tabs
        activeKey={activeKey}
        onChange={(key) => {
          setActiveKey(key);
        }}
      >
        <TabPane tab="xbom对象基本信息" key="1">
          {/* <XbomObjectInfo value={value} /> */}
        </TabPane>
        <TabPane tab="XBOM信息" key="2">
          {/* <SettlementList value={value} /> */}
        </TabPane>
        <TabPane tab="x配置信息" key="3">
          {/* <XConfigList value={value} /> */}
        </TabPane>
        <TabPane tab="技术通知单" key="4">
          {/* <TechnicalNotice value={value} allowEdit={false} /> */}
        </TabPane>
        <TabPane tab="设置邮件正文" key="5">
          {/* <Mail value={value} readOnly /> */}
        </TabPane>
      </Tabs>
    </Modal>
  );
};

export default App;
